<template>
  <div class="merchant-audit">
    <!-- 筛选 -->
    <el-form inline class="mb-4">
      <el-form-item label="审核状态">
        <el-select v-model="selectedStatus" style="width: 160px">
          <el-option label="全部" value="" />
          <el-option label="待审核" value="待审核" />
          <el-option label="已通过" value="审核通过" />
          <el-option label="已拒绝" value="审核拒绝" />
        </el-select>
      </el-form-item>

      <el-form-item label="店铺名称">
        <el-input v-model="keyword" placeholder="输入名称搜索" style="width: 200px" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="applyFilter">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <div class="table-wrapper">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="shopId" label="ID" width="60" />
        <el-table-column prop="shopName" label="店铺名称" min-width="160" show-overflow-tooltip />
        <el-table-column label="地区" min-width="140">
          <template #default="{ row }"> lat:{{ row.latitude }} lng:{{ row.longitude }} </template>
        </el-table-column>
        <el-table-column
          prop="detailAddress"
          label="详细地址"
          min-width="200"
          show-overflow-tooltip
        />
        <el-table-column prop="shopPhone" label="电话" width="140" />
        <el-table-column label="配送" width="120">
          <template #default="{ row }">
            <span v-if="row.supportDelivery === 'true'">支持 ({{ row.deliveryFee }} 元)</span>
            <span v-else>不支持</span>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" width="140">
          <template #default="{ row }">
            <el-tag
              :type="
                row.applyStatus === '审核通过'
                  ? 'success'
                  : row.applyStatus === '审核拒绝'
                  ? 'danger'
                  : 'warning'
              "
            >
              {{ row.applyStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="openDetail(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="mt-4 flex justify-end">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        v-model:current-page="currentPage"
      />
    </div>

    <!-- 详情弹窗（内联） -->
    <el-dialog v-model="dialogVisible" :title="current?.shopName || '商家详情'" width="800px">
      <div v-if="current">
        <p><strong>店铺名称：</strong>{{ current.shopName }}</p>
        <p><strong>详细地址：</strong>{{ current.detailAddress }}</p>
        <p><strong>电话：</strong>{{ current.shopPhone }}</p>
        <p>
          <strong>是否支持配送：</strong
          >{{ current.supportDelivery === 'true' ? '支持' : '不支持' }}
        </p>
        <p v-if="current.supportDelivery === 'true'">
          <strong>配送费：</strong>{{ current.deliveryFee }} 元
        </p>
        <p><strong>审核状态：</strong>{{ current.applyStatus }}</p>
        <p><strong>1积分价值（元）：</strong>{{ current.pointExchangeRate }}</p>

        <div class="mt-2">
          <strong>店铺图片：</strong>
          <div class="flex gap-2 mt-1">
            <el-image :src="current.shopImage" fit="cover" style="width: 160px; height: 110px" />
          </div>
        </div>

        <div class="mt-2">
          <strong>营业执照：</strong>
          <div class="mt-1">
            <el-image
              :src="current.licenseImage"
              fit="contain"
              style="width: 360px; height: 240px"
            />
          </div>
        </div>
      </div>

      <template #footer>
        <el-button @click="dialogVisible = false">关闭</el-button>
        <!-- <el-button type="success" @click="modifySt(1)" :disabled="!canApprove">通过</el-button>
        <el-button type="danger" @click="reject" :disabled="!canReject">拒绝</el-button> -->

      </template>
    </el-dialog>

    <!-- 拒绝原因对话框 -->
    <el-dialog v-model="rejectDialogVisible" title="填写拒绝原因" width="560px">
      <el-form>
        <el-form-item label="拒绝原因" label-width="80px">
          <el-input
            type="textarea"
            v-model="rejectRemark"
            placeholder="请输入拒绝原因（必填）"
            rows="4"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="rejectDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="modifySt(2)">确认拒绝</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getShopApplicationList, getShopApplicationDetails,modifyStatus } from '@/api/merchant'
import type { ShopApp } from '@/api/merchant'

const tableData = ref<ShopApp[]>([])
const currentPage = ref(1)
const pageSize = ref(10)
const selectedStatus = ref<'pending' | 'approved' | 'rejected' | ''>('')
const keyword = ref('')
const dialogVisible = ref(false)
const rejectDialogVisible = ref(false)
const current = ref<ShopApp | null>(null)
const rejectRemark = ref('')

const pagedList = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  return tableData.value.slice(start, start + pageSize.value)
})

function applyFilter() {
  currentPage.value = 1
}


async function fetchList() {
  try {
    const res = await getShopApplicationList()
    console.log('赋值前-isArray:', Array.isArray(res)) // 必须 true
    tableData.value = res.filter(item => item.applyStatus === '审核通过')
    console.log('赋值后-isArray:', Array.isArray(tableData.value))
  } catch (e) {
    ElMessage.error('获取列表失败')
    tableData.value = [] // 出错也清空
  }
}



async function openDetail(row: ShopApp) {
  try {
    dialogVisible.value = true
    const detail = await getShopApplicationDetails(row.shopId)
    current.value = detail
  } catch (e) {
    ElMessage.error('获取详情失败')
  }
}

onMounted(fetchList)
</script>

<style scoped>
.merchant-audit {
  padding: 16px;
  font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;
}
.flex {
  display: flex;
}
.gap-2 {
  gap: 8px;
}
.mt-2 {
  margin-top: 8px;
}
.mt-4 {
  margin-top: 16px;
}
.mb-4 {
  margin-bottom: 16px;
}
.mb-2 {
  margin-bottom: 8px;
}
.truncate-text {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* ✅ 表格容器：带背景 */
.table-wrapper {
  padding: 12px 16px;
  background: #fff;
  border-radius: 8px;
  overflow-x: auto;
}
</style>
